<template>
	<view class="treasureOrder">
		<view class="address flex_conter" @click="reasonShow = true" v-if="address_list.length > 0">
			<view class="iconBox flex_conter_c">
				<u-icon class="icon" name="map-fill" size="40" color="#fff"></u-icon>
			</view>
			<view class="content">
				<view class="text">
					<text class="uname">{{address_list[addressRadioValue].receiver_name}}</text>
					<text class="phone">{{address_list[addressRadioValue].receiver_phone}}</text>
				</view>
				<view class="addressInfo u-line-2">{{address_list[addressRadioValue].area}} {{address_list[addressRadioValue].detail}}</view>
			</view>
			<view class="btn"><u-icon name="arrow-right" size="28" color="#eee"></u-icon></view>
		</view>
		
		<view class="plusAddress flex_conter_c" @click="goNewAddress" v-else>
			<u-icon name="plus" color="#C24242" size="36"></u-icon>
			<view>添加收货地址</view>
		</view>
		
		<view class="commodity">
			<view class="commodityBox">
				<u-image width="160rpx" height="160rpx" :src="goods_main_img" border-radius="7"></u-image>
				<view class="info">
					<view class="title u-line-2">{{goods_title}}</view>
					<!-- <view class="sort">
						<block v-for="(item,index) in choose_spec_list" :key="index">
							<block v-if="index > 0">,</block><view style="font-weight: bold;display: inline;">{{item.name}}:</view>{{item.val}}
						</block>
					</view> -->
					<view class="num flex_space">
						<view class="price"><text>￥</text>{{sales_price}}</view>
						<!-- <view class="pieces"><text>x</text>1</view> -->
					</view>
				</view>
			</view>
			<view class="commodityInfo">
				<view class="item flex_space_b">
					<view class="label">商品总价</view>
					<view class="value">￥{{sales_price}}</view>
				</view>
				<view class="item flex_space_b">
					<view class="label">运费</view>
					<view class="value">包邮</view>
				</view>
			</view>
		</view>
		
		<view class="delivery mTop2">
			<view class="item flex_space_b">
				<view class="label">小计</view>
				<view class="value">￥14.80</view>
			</view>
			<view class="item flex_space_b">
				<view class="label">未买中的佣金</view>
				<view class="value">
					<u-icon name="red-packet-fill" color="#ff4b06" size="28"></u-icon>
					<text class="text">￥1.48</text>
				</view>
			</view>
		</view>
		
		<view class="payType mTop2">
			<view class="item flex_space_b" @click="payTypeChage('20')">
				<view class="label">
					<u-icon name="rmb-circle-fill" color="#ff4b06" size="28"></u-icon>
					<text class="text">余额支付</text>
					<text class="surplus">可用：￥8.78</text>
				</view>
				<view class="radio" :class="{'active': pay_type == '20'}">
					<view class="checkbox"></view>
				</view>
			</view>
			<view class="item flex_space_b" @click="payTypeChage('10')">
				<view class="label">
					<u-icon name="weixin-circle-fill" color="#41b035" size="28"></u-icon>
					<text class="text">微信支付</text>
				</view>
				<view class="radio" :class="{'active': pay_type == '10'}">
					<view class="checkbox"></view>
				</view>
			</view>
		</view>
		
		<!-- <view class="total mTop2">
			<view class="item flex_space_b" v-if="goods_score_use>0">
				<view class="left">积分抵扣（{{score_use_rate}}:1）</view>
				<view class="right">
					<view class="have" v-if="order_score>0">-<text>{{order_score}}</text></view>
					<view class="no" v-else>积分不足</view>
				</view>
			</view>
			<view class="item flex_space_b" v-if="goods_score_use>0">
				<view class="left">抵扣金额</view>
				<view class="right">
					<view class="have" v-if="order_score>0">-￥<text>{{goods_score_use}}</text></view>
					<view class="no" v-else>￥0</view>
				</view>
			</view>
			<view class="item flex_space_b" v-if="float_price>0">
				<view class="left">浮动退回</view>
				<view class="right">
					<view class="have">+￥<text>{{float_price}}</text></view>
				</view>
			</view>
			<view class="item flex_space_b">
				<view class="left leftMargin">支付方式</view>
				<view class="right">
					<view class="have" v-if="is_balance_pay">
						<view class="payItem">
							<image class="logo" src="@/static/logo.png" mode="aspectFill"></image>
							<text class="yue text">余额支付</text>
						</view>
					</view>
					<view class="wechat" v-else>
						<u-radio-group v-model="pay_type" active-color="#22ac38" :wrap="true" @change="payMethodChange">
							
							<u-radio v-for="(item,index) in pay_method" :key="index" :name="item.pay_type" >
								<view class="payItem radio-m">
									<block v-if="item.pay_type == '10' || item.pay_type == '30' || item.pay_type == '60'">
										<text class="custom-icon custom-icon-weixinzhifu weixin" ></text>
										<text class="weixin text">{{item.pay_name}}</text>
									</block>
									<block v-if="item.pay_type == '40' || item.pay_type == '50'">
										<text class="custom-icon custom-icon-zhifubaozhifu zhifubao" ></text>
										<text class="zhifubao text">{{item.pay_name}}</text>
									</block>
									<block v-if="item.pay_type == '20'">
										<image class="logo" src="../../static/logo.png" mode="aspectFill" ></image>
										<text class="yue text">{{item.pay_name}}</text>
									</block>
								</view>
							</u-radio>
							
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="item flex_space_b" @click="getUserCouponCanUseList">
				<view class="left">优惠券</view>
				<view class="right">
					<text v-if="!couponActive && couponActive != 0" class="text" style="color: #999;">未使用优惠券</text>
					<text v-else class="text" style="color: #22ac38;">-￥{{ couponList[couponActive].amount }}</text>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="item flex_space_b" @click="getUserHongbaoCanUseList">
				<view class="left">红包</view>
				<view class="right">
					<text v-if="!redEnvelopeActive && redEnvelopeActive != 0" class="text" style="color: #999;">未使用红包</text>
					<text v-else class="text" style="color: #22ac38;">-￥{{ redEnvelopeList[redEnvelopeActive].amount }}</text>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
		</view> -->
		
		<view class="total mTop2">
			<view class="item flex_column">
				<view class="left">备注：<text>(100字以内)</text></view>
				<view class="textareaBox mTop2">
					<u-input v-model="order_msg" type="textarea" maxlength="100" placeholder="请填写备注信息" placeholder-style="color: #999;" height="140" :border="false" />
				</view>
			</view>
		</view>
		
		<view class="bottomBox">
			<view class="price flex1">合计金额：<text>￥{{order_price}}</text></view>
			<view class="btnBox flex_conter_c">
				<button type="primary" class="btn" hover-class="none" @click="goBack">取消</button>
				<button type="primary" class="btn" hover-class="none" @click="pay">提交订单</button>
			</view>
		</view>
		
		<u-popup class="popup" v-model="reasonShow" mode="bottom" border-radius="14" width="640" height="780" :closeable="true">
			<view class="popupBox">
				<view class="title">收货地址</view>
				<scroll-view class="content" scroll-y>
					<view class="plusAddress flex_conter_c" @click="goNewAddress">
						<u-icon name="plus" color="#22ac38" size="36"></u-icon>
						<view>添加收货地址</view>
					</view>
					
					<view class="item" v-for="(item,index) in address_list" :key="index">
						<u-radio-group v-model="addressRadioValue" active-color="">
							<u-radio :name="index" active-color="#22ac38"></u-radio>
						</u-radio-group>
						<view class="addressBox" @click="egitAddress(index)">
							<view class="info">
								<view class="text"> 
									<text class="uname">{{item.receiver_name}}</text>
									<text class="phone">{{item.receiver_phone}}</text>
									<text class="default" v-if="item.is_default == 1" >默认</text>
								</view>
								<view class="addressInfo u-line-2">{{item.area}} {{item.detail}}</view>
							</view>  
							<view class="icon" @click="goEditAddress(index)"><u-icon name="edit-pen" size="36" color="#22ac38"></u-icon></view>
						</view>
					</view>
					
				</scroll-view>
				<view class="btnBox">
					<button type="primary" class="btn" hover-class="none" @click="confirm">确认</button>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="couponShow" mode="bottom" width="620" border-radius="12" :closeable="true">
			<view class="couponBox">
				<view class="titleBox">优惠券</view>
				<scroll-view scroll-y class="list">
					<view class="item" v-for="(item, index) in couponList" :key="index" @click="couponEvent(index)">
						<view class="left">
							<view class="amount">{{item.amount}}<text class="text">元</text></view>
							<view class="limit">{{item.limit}}</view>
						</view>
						<view class="center">
							<view class="title">{{item.title}}</view>
							<view class="time">有效期：{{item.time}}</view>
						</view>
						<view class="right flex_conter_c" :style="couponActive == index ? 'background-color: #22ac38;' : 'background-color: #eee;'">
							<u-icon v-if="couponActive == index" name="checkbox-mark" color="#fff" size="24"></u-icon>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-popup v-model="redEnvelopeShow" mode="bottom" width="620" border-radius="12" :closeable="true">
			<view class="redEnvelopeBox">
				<view class="titleBox">红包</view>
				<scroll-view scroll-y class="list">
					<view class="item" v-for="(item, index) in redEnvelopeList" :key="index" @click="redEnvelopeEvent(index)">
						<view class="left">
							<view class="amount">{{ item.amount }}<text class="text">元</text></view>
						</view>
						<view class="center">
							<view class="time">有效期：{{ item.time }}</view>
						</view>
						<view class="right flex_conter_c" :style="redEnvelopeActive == index ? 'background-color: #fff;' : 'background-color: #eee;'">
							<u-icon v-if="redEnvelopeActive == index" name="checkbox-mark" color="#22ac38" size="24"></u-icon>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-modal
		 v-model="protocolShow"
		 :show-title="false"
		 :show-cancel-button="true"
		 :confirm-style="{ 'background-color': '#ef4a46' }"
		 confirm-color="#fff"
		 confirm-text="同意并继续"
		 cancel-text="关闭"
		 @cancel="goBack">
			<view class="protocol-content">
				<u-parse :html="protocolContent"></u-parse>
			</view>
		</u-modal>
	</view>
</template>

<script>
	var util = require('../../common/util.js');

	export default {
		data() {
			return {
				value: '',
				addressRadioValue: 0,
				reasonShow: false,
				order_type: '10',
				is_speed_order: '10',
				goods_id:0,
				goods_main_img:"",
				choose_spec_list:[],
				goods_title:"",
				sales_price:0,
				float_price:0,
				order_score:0,
				goods_score_use:0,
				score_use_rate:0,
				order_msg:"",
				address_list:[],
				pay_type: '0',
				is_balance_pay:false,
				pay_method: [],
				order_price: 0,
				old_order_price:0,
				couponList: [],
				couponShow: false,
				couponActive: null,
				redEnvelopeList: [],
				redEnvelopeShow: false,
				redEnvelopeActive: null,
				
				protocolShow: true,
				protocolContent: `
				  <div style="font-size: 13px;">
					<p style="text-align: center;">声明</p>
					<p style="margin-top: 12px;"></p>
					<p>请您认真阅读以下内容：</p>
					<p style="margin-top: 12px;"></p>
					<p>鉴于本平台销售的为纯食品类商品以及返利模式的特殊性，本平台销售的商品，概不支持退货。商品如有质量问题，请及时与客服沟通。</p>
					<p style="margin-top: 12px;"></p>
					<p style="text-align: right;">我已阅读上述内容，同意并接受！</p>
				  </div>
				`
			}
		},
		onLoad(options) {
			if(options.order_type == '30'){
				this.order_type = '20';
				this.is_speed_order = '20';
			}else{
				this.order_type = options.order_type;
			}
			this.goods_id = options.goods_id;
			this.goods_main_img = options.goods_main_img;
			this.goods_title = options.goods_title;
			this.sales_price = options.sales_price;
			this.choose_spec_list = JSON.parse(options.choose_spec_json);
		},
		onShow() {
			this.loadData();
		},
		methods: {
			goBack () {
				uni.navigateBack()
			},
			payTypeChage (item) {
				this.pay_type = item;
			},
			payMethodChange (e) {
				this.pay_type = e;
			},
			loadData: function(){
				// 加载数据
				var that = this;
				let data = {
					"goods_id":that.goods_id,
					"use_scene" : util.getCurrentSecene(),
					"order_type": this.order_type,
					"is_speed_order": this.is_speed_order,
				};
				
				util.requestPost("api.php/order/getCreateOrderData", data, function(res) {
					let order_price = 0;
					if(parseFloat(res.data.goods_score_use)>0 && parseFloat(res.data.order_score)>0){
						order_price = parseFloat(that.sales_price) + parseFloat(res.data.float_price) - parseFloat(res.data.goods_score_use);
					}else{
						order_price = parseFloat(that.sales_price) + parseFloat(res.data.float_price);
					}
					
					order_price = that.numFilter(order_price);
					
					that.order_score = res.data.order_score;
					that.float_price = res.data.float_price;
					that.order_price = order_price;
					that.old_order_price = order_price;
					that.goods_score_use = res.data.goods_score_use;
					that.score_use_rate = res.data.score_use_rate;
					that.address_list = res.data.address_list;
					that.is_balance_pay = res.data.is_balance_pay;
					that.pay_method = res.data.pay_method;
					if(that.is_balance_pay){
						that.pay_type = '20';
					}else{
						that.pay_type = that.pay_method[0].pay_type;
					}
				});
			},
			pay(){
				// 跳转支付
				if(this.address_list.length == 0){
					util.toast("请选择收货地址！");
					return false;
				}
				
				if(this.pay_type == '0'){
					util.toast("请选择支付方式！");
					return false;
				}
				let that = this;
				let this_coupon_id = 0;
				let this_hongbao_id = 0;
				if(that.couponActive!= null){
					this_coupon_id = that.couponList[that.couponActive].id
				}
				if(that.redEnvelopeActive!= null){
					this_hongbao_id = that.redEnvelopeList[that.redEnvelopeActive].id
				}
				let data = {
					goods_id:this.goods_id,
					address_id:this.address_list[this.addressRadioValue].id,
					goods_price:this.sales_price,
					float_price:this.float_price,
					use_score:this.order_score,
					order_msg:this.order_msg,
					order_type:this.order_type,
					pay_type:this.pay_type,
					choose_spec_json:JSON.stringify(this.choose_spec_list),
					is_speed_order: this.is_speed_order,
					coupon_id:this_coupon_id,
					hongbao_id:this_hongbao_id
				}
				util.requestPost(
				'api.php/order/createOrder',
					data,
					function (res) {
						if(that.pay_type == '10'){
							// 拉起微信JSAPI支付
							uni.requestPayment({
								nonceStr: res.data.param.nonceStr,
								package: res.data.param.package,
								paySign: res.data.param.paySign,
								timeStamp: res.data.param.timeStamp,
								signType: 'MD5',
								success:function(){
								  wx.redirectTo({
									url: `/pages/index/paySuccessful`
								  });
								},
								fail:function(e){
								  util.toast("支付失败，请重新支付！");
								}
							});
						}else if(that.pay_type == '20'){
							// 余额支付
							wx.redirectTo({
								url: `/pages/index/paySuccessful`
							});
						}else if(that.pay_type == '30'){
							// 微信H5支付
							
						}else if(that.pay_type == '40'){
							// 支付宝H5支付
							uni.navigateTo({
								url:"../openUrl/openUrl?openUrl="+res.data.url+"&title=支付宝支付"
							});
						}else if(that.pay_type == '50'){
							// 支付宝APP支付
							uni.requestPayment({
								provider: "alipay",
								orderInfo: res.data.params,
								success: function (res) {
									wx.redirectTo({
										url: `/pages/index/paySuccessful`
									});
								},
								fail: function (err) {
									util.toast("取消支付");
								}
							});
						}else if(that.pay_type == '60'){
							// 微信APP支付
						}
						
					},
					true
				);
			},
			egitAddress (index) {
				this.addressRadioValue = index
			},
			goEditAddress (index) {
				uni.navigateTo({
					url: `/pagesB/my/addressChange?address_detail=${JSON.stringify(this.address_list[index])}`
				})
			},
			goNewAddress () {
				this.addressRadioValue = 0;
				uni.navigateTo({
					url: `/pagesB/my/addressChange`
				});
			},
			confirm () {
				this.reasonShow = false
			},
			numFilter (value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			},
			couponEvent (index) {
				let _this = this;
				if (this.couponActive == index) {
					this.couponActive = null;
				} else {
					this.couponActive = index;
				}
				_this.couponShow = false;
				_this.resetOrderPrice();
			},
			redEnvelopeEvent (index) {
				let _this = this;
				if (this.redEnvelopeActive == index) {
					this.redEnvelopeActive = null;
				} else {
					this.redEnvelopeActive = index;
				}
				_this.redEnvelopeShow = false;
				_this.resetOrderPrice();
				
			},
			resetOrderPrice(){
				let _this = this;
				let this_old_order_price = parseFloat(_this.old_order_price);
				let coupon_amount = 0;
				let hongbao_amount = 0;
				if(_this.couponActive != null){
					if(_this.couponList[_this.couponActive].q_type == 3){
						_this.order_price = 0;
						return false;
					}else{
						coupon_amount = parseFloat(_this.couponList[_this.couponActive].amount);
					}
				}
				if(_this.redEnvelopeActive != null){
					hongbao_amount = parseFloat(_this.redEnvelopeList[_this.redEnvelopeActive].amount);
				}
				this_old_order_price = this_old_order_price - coupon_amount - hongbao_amount;
				if(this_old_order_price<=0){
					this_old_order_price = 0;
				}
				this_old_order_price = this_old_order_price*1;
				_this.order_price = this_old_order_price.toFixed(2);
			},
			getUserCouponCanUseList(){
				let _this = this;
				const param = {};
				param.order_type = _this.order_type;
				param.sales_price = _this.sales_price;
				util.requestPost('api.php/UserCoupon/getUserCouponCanUseList',param,function(res) {
						_this.couponList = res.data;
						_this.couponShow = true;
					},true
				);
			},
			getUserHongbaoCanUseList(){
				let _this = this;
				const param = {};
				param.order_type = _this.order_type;
				param.sales_price = _this.sales_price;
				util.requestPost('api.php/UserCoupon/getUserHongbaoCanUseList',param,function(res) {
						_this.redEnvelopeList = res.data;
						_this.redEnvelopeShow = true;
					},true
				);
			}
		}
	}
</script>

<style scoped lang="scss">
.wechat{
	color: #18B566;
}
.treasureOrder {
	background-color: #f5f5f5;
	min-height: 100%;
	padding-bottom: 120rpx;
}

.plusAddress {
	padding: 32rpx;
	height: 180rpx;
	background-color: #FFFFFF;
	flex-direction: column;
}

.address {
	padding: 28rpx 32rpx;
	background-color: #FFFFFF;
	.iconBox {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: var(--primaryColor);
		.icon {
			color: #FFFFFF;
			font-size: 40rpx;
		}
	}
	.content {
		flex: 1;
		padding: 0 20rpx 0;
		.addressInfo {
			font-size: 28rpx;
			color: #333;
		}
		.text {
			margin-bottom: 10rpx;
			.uname {
				font-size: 26rpx;
				color: #333333;
				margin-right: 10rpx;
			}
			.phone {
				font-size: 24rpx;
				color: #999;
			}
			.default {
				width:68rpx;
				height:40rpx;
				border:1px solid var(--primaryColor);
				border-radius:6rpx;
				font-size:22rpx;
				line-height: 36rpx;
				color: var(--primaryColor);
				text-align: center;
				margin-left: 10rpx;
				padding: 0 8rpx;
			}
		}
	}
}

.commodity {
	background-color: #FFFFFF;
	margin-top: 20rpx;
	padding: 30rpx;
	.merchant {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
		.merchantName {
			margin-left: 10rpx;
			font-size:28rpx;
			font-weight:bold;
		}
	}
	.commodityBox {
		display: flex;
		.info {
			flex: 1;
			margin-left: 22rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				font-size: 28rpx;
				color: #333333;
			}
			.price {
				color: var(--primaryColor);
				font-size: 28rpx;
				font-weight: 600;
				text {
					font-size: 24rpx;
				}
			}
			.num {
				.pieces {
					font-size: 28rpx;
					color: #666666;
					text {
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.commodityInfo {
		.item {
			margin-top: 20rpx;
		}
	}
}

.delivery {
	background-color: #FFFFFF;
	padding: 20rpx 30rpx;
	align-items: center;
	.item {
		&:not(:first-of-type) {
			margin-top: 20rpx;
		}
		.value {
			color: var(--primaryColor);
			.text {
				margin-left: 6rpx;
			}
		}
	}
}

.payType {
	background-color: #FFFFFF;
	padding: 20rpx 30rpx;
	.item {
		&:not(:first-of-type) {
			margin-top: 20rpx;
		}
		.label {
			.text {
				margin-left: 8rpx;
			}
			.surplus {
				color: #666666;
				font-size: 26rpx;
				margin-left: 16rpx;
			}
		}
	}
}

.bottomBox {
	height: 100rpx;
	background-color: #FFFFFF;
	border-top: 1rpx solid #EEEEEE;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	.price {
		font-size: 26rpx;
		text-align: center;
	}
	.btnBox {
		.btn {
			width: 190rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			margin: 0;
			border-radius: 0;
			&::after {
				border: none;
			}
			&:first-of-type {
				color: #333;
				background: #EEEEEE;
			}
			&:last-of-type {
				color: #FFFFFF;
				background: var(--redColor);
			}
		}
	}
}

.popupBox {
	padding: 0 32rpx;
	height: 100%;
	position: relative;
}
.popupBox .title {
	font-size: 36rpx;
	text-align: center;
	color: #333333;
	line-height: 90rpx;
	border-bottom: 1px solid #EEEEEE;
}
.popupBox .content {
	height: 572rpx;
	overflow-y:auto;
	padding-top: 10rpx;
}
.popupBox .content .plusAddress {
	height: 160rpx;
	padding: 0;
	border: 1rpx solid #EEEEEE;
	border-radius: 12rpx;
}
.popupBox .content .item {
	text-align: left;
	height: 180rpx;
	border-bottom: 1rpx solid #EEEEEE;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.popupBox .content .item:last-of-type {
	border-bottom: none;
}
.popupBox .content .item .addressBox {
	display: flex;
	align-items: center;
	flex: 1;
}
.popupBox .content .item .addressBox .info {
	flex: 1;
	padding: 0 20rpx 0;
}
.addressBox .info .text {
	margin-bottom: 10rpx;
}
.addressBox .info .text .uname {
	font-size: 26rpx;
	color: #333333;
	margin-right: 10rpx;
}
.addressBox .info .text .phone {
	font-size: 24rpx;
	color: #999;
}
.addressBox .info .text .default {
	width:68rpx;
	height:40rpx;
	border:1px solid var(--primaryColor);
	border-radius:6rpx;
	font-size:22rpx;
	line-height: 36rpx;
	color: var(--primaryColor);
	text-align: center;
	margin-left: 10rpx;
	padding: 0 8rpx;
}
.popupBox .btnBox {
	position: absolute;
	bottom: 0;
	left: 32rpx;
	right: 32rpx;
	height: 100rpx;
}
.popupBox .btnBox .btn {
	font-size: 32rpx;
	background-color: var(--primaryColor);
}

.total {
	background-color: #FFFFFF;
	padding: 0 30rpx;
}
.total .item {
	padding: 20rpx 0;
}
.total .item .leftMargin {
	margin-right: 320rpx;
}
.total .item .left text {
	color: #999999;
	font-size: 24rpx;
}
.total .item .right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}
.total .item .right .have {
	color: var(--primaryColor);
	font-size: 24rpx;
}
.total .item .right .have text {
	font-size: 32rpx;
}
.total .item .right .no {
	color: #999999;
}
.total .item .right.redText {
	font-size: 24rpx;
}
.total .item .right.redText text {
	font-size: 32rpx;
}
.total .item .textareaBox {
	background-color: #EEEEEE;
	border-radius: 12rpx;
	padding: 4rpx 16rpx;
}
.total .item .text {
	font-size: 28rpx;
	margin-right: 12rpx;
}

.payItem {
	font-size: 28rpx;
	display: flex;
	align-items: center;
}
.payItem .custom-icon {
	font-size: 28rpx;
}
.payItem .weixin {
	color: #41b035;
}
.payItem .zhifubao {
	color: #0f8ee9;
}
.payItem .yue {
	color: #22ac38;
}
.payItem .text {
	margin-left: 6rpx;
}
.payItem .logo {
	width: 30rpx;
	height: 30rpx;
}
.radio-m{
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}

.couponBox {
	padding: 0 20rpx 24rpx;
	.titleBox {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 95rpx;
	}
	.list {
		height: 600rpx;
		.item {
			border-radius: 12rpx;
			background-color: #FFFFFF;
			padding: 24rpx 24rpx 24rpx 12rpx;
			border: 1rpx solid #bbbbbb;
			box-shadow: 0 4rpx 0 rgba($color: #ddd, $alpha: 1.0);
			display: flex;
			align-items: flex-end;
			margin-bottom: 20rpx;
			&:last-of-type {
				margin-bottom: 0;
			}
			.left {
				width: 180rpx;
				text-align: center;
				margin-right: 12rpx;
				.amount {
					font-size: 48rpx;
					font-weight: bold;
					color: var(--primaryColor);
					.text {
						font-size: 24rpx;
						font-weight: normal;
					}
				}
				.limit {
					font-size: 24rpx;
					color: #999999;
					margin-top: 8rpx;
				}
			}
			.center {
				flex: 1;
				.title {
					font-size: 32rpx;
					font-weight: bold;
				}
				.time {
					font-size: 24rpx;
					color: #999999;
					margin-top: 8rpx;
				}
			}
			.right {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
			}
		}
	}
}

.redEnvelopeBox {
	padding: 0 20rpx 24rpx;
	.titleBox {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 95rpx;
	}
	.list {
		height: 600rpx;
		.item {
			border-radius: 12rpx;
			background: var(--btnBgColor);
			padding: 24rpx 24rpx 24rpx 12rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			&:last-of-type {
				margin-bottom: 0;
			}
			.left {
				width: 180rpx;
				text-align: center;
				margin-right: 12rpx;
				.amount {
					font-size: 48rpx;
					font-weight: bold;
					color: #FFFFFF;
					.text {
						font-size: 24rpx;
						font-weight: normal;
					}
				}
			}
			.center {
				flex: 1;
				.time {
					font-size: 24rpx;
					color: #FFFFFF;
					margin-top: 8rpx;
				}
			}
			.right {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
			}
		}
	}
}
.protocol-content {
	margin: 20rpx;
	padding: 20rpx;
	border: 1rpx solid #EEEEEE;
	border-radius: 8rpx;
}
</style>
